<template>
    <div class="content-page" v-if="datalist.records.length">
        <div class="content_item" v-for="(i, k) in datalist.records" :key="k">
            <div class="content_item_title" :style="{ fontSize: globalFont == 'small_font' ? '28rpx' : globalFont == 'small-medium'? '32rpx':'36rpx' }">{{ i.equipmentName }}</div>
            <div class="content_item_content" :style="{ fontSize: globalFont == 'small_font' ? '26rpx' :globalFont == 'small-medium'? '30rpx':'34rpx' }">{{ i.warnMsg }}</div>
            <div class="content_item_content" :class="['content_item_content', globalFont]">设备工作小时:{{ i.workingHours }}小时</div>
            <div class="flex_center">
                <div class="content_item_user" :style="{ fontSize: globalFont == 'small_font' ? '24rpx' :globalFont == 'small-medium'? '28rpx':'32rpx' }">操作人：{{ i.operator }}</div>
                <div class="content_item_time" :style="{ fontSize: globalFont == 'small_font' ? '24rpx' :globalFont == 'small-medium'? '28rpx':'32rpx' }">{{ i.createTime }}</div>
            </div>
        </div>
    </div>
    <div v-else class="empty-box">
    <image src="/src/static/home/img_None.png"></image>
    <div class="title" :class="['title', globalFont]">暂无数据</div>
  </div>
</template>
<script setup lang="ts">
import { ref ,getCurrentInstance} from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import type { maintenanceType, resInfo } from '@/api/myInfo/type.ts'
import { maintenanceFn } from '@/api/myInfo/myInfo.ts'
const datalist = ref<maintenanceType>({
    totalNum: '',
    records: []
})
let form = {
    pageNo: 1,
    pageSize: 10,
};
const getDataList = () => {
    maintenanceFn({
        pageNo: form.pageNo,
        pageSize: form.pageSize,
    }).then((res: resInfo) => {
        if (res.resultStatus) {
            let arr1 = datalist.value.records
        let arr2 = res.resultData.records
        datalist.value.records = arr1.concat(arr2);
        } else {
            uni.showToast({
                title: res.errorMessage,
                icon: "none",
            });
        }
    })
        .catch((err: any) => {
            uni.showToast({
                title: "服务器异常",
                icon: "none",
            });
        });
    return

}
onReachBottom(() => {
    form.pageNo += 1;
    getDataList();
})
const instance = getCurrentInstance();
const appStorage = instance?.appContext.config.globalProperties.appStorage;
const globalFont = ref()
onLoad(() => {
    const userInfo_key = appStorage.getObj("userInfo_key");
	globalFont.value = userInfo_key.smallFont
    getDataList()
})
</script>
<style lang="scss" scoped>
:root {
  /* 默认字号 */
  --font-size-small: 26rpx;
  /* 中号字号 */
  --font-size-medium: 32rpx;
    /* 大号字号 */
  --font-size-large: 40rpx;
}

.small_font {
  font-size: var(--font-size-small);
}

.small-medium {
  font-size: var(--font-size-medium);
}

.small-large {
  font-size: var(--font-size-large);
}
.content-page {
    background: #f8f8f8;

    .content_item {
        background-color: #fff;
        border-bottom: 2rpx solid #eeeeee;
        padding: 32rpx;

        &_title {
            // font-size: 32rpx;
            font-weight: bold;
            text-align: left;
            color: #333333;
            line-height: 40rpx;
            margin-bottom: 20rpx;
        }

        &_content {
            // font-size: 26rpx;
            text-align: left;
            color: #333;
            line-height: 32rpx;
            margin-bottom: 32rpx;
        }

        &_time {
            // font-size: 24rpx;
            text-align: left;
            color: #999999;
            line-height: 34rpx;
        }

        &_user {
            // font-size: 24rpx;
            text-align: left;
            color: #999999;
            line-height: 34rpx;
            margin-right: 32rpx;
        }

        &_warning {
            // font-size: 24rpx;
            text-align: left;
            color: #C92A2A;
            line-height: 34rpx;
            margin-bottom: 6rpx;
        }
    }
}

.empty-box {
  height: calc(100vh - 150rpx);
  background: #f8f8f8;
  padding: 32rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  image {
    width: 150rpx;
    height: 150rpx;
    margin-bottom: 40rpx;
  }

  .title {
    // font-size: 32rpx;
    color: #999999;
    font-weight: bold;
  }
}
</style>